<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no" />
	<title>首页</title>
	<link rel="stylesheet" type="text/css" href="../c/aui.css" />
	<style>
		body {
			background-color: transparent;
			/*background-color:#000;*/
			/*background-color:#fff;*/
		}

		.section {
			width: 5rem;
			background: #888;
			padding: 0.35rem;
			border-radius: 0.5rem;
			background-color: rgba(103, 103, 103, 0.5);
		}

		.section .aui-progress {
			margin: 0.5rem 0;
		}

		.title {
			display: flex;
			justify-content: space-between;
			font-size: 0.6rem;
		}

		.h4 {
			text-align: center;
			font-size: 0.7rem;
			display: flex;
			justify-content: center;
			align-items: center;
		}
		.h4 img{
			width: 0.75rem;
			-webkit-animation: rotation .65s 0s linear infinite;
			animation: rotation .65s 0s linear infinite
		}
		.h4 span{
			padding-left: 0.35rem;
		}
		@-webkit-keyframes rotation{
			from {
				-webkit-transform: rotate(0deg) scale(1);
				transform: rotate(0deg) scale(1)
		  }
			to {
				-webkit-transform: rotate(360deg) scale(1);
				transform: rotate(360deg) scale(1)
		  }
		}
	</style>
</head>

<body>
	<div class="section">
		<div class="h4"><img src="../i/footer_progress.png"><span>发布中</span></div>
		<div class="aui-progress aui-progress-xxs">
			<div class="aui-progress-bar" id="a3" style="width: 0%;"></div>
		</div>
		<div class="title">
			<span id="a1"></span>
			<span id="a2">0%</span>
		</div>
	</div>
</body>
<script type="text/javascript" src="../j/api.js"></script>
	<script type="text/javascript" src="../j/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
	var images = [],jindu_a=0;
	apiready = function() {
		urls();
		// console.log(JSON.stringify(api.pageParam));
		api.setFrameAttr({
			name: 'article_loading',
			rect: {
				w: $('.section').width(),
				h: $('.section').height(),
				x: api.winWidth - $('.section').width() - 15
			}
		});
		if(api.pageParam['channel'] == 2){
			$('#a1').text('处理中');
			setTimeout(function(){
				if(api.systemType == 'ios'){
					zhuanma();
				}else{
					video_data();
				}
			},api.systemType == 'ios'?0:2000)
		}else{
			images = api.pageParam['data'];
			images_num = api.pageParam['data'].length;
			$('#a1').text('0/'+images_num+"张");
			images_data();
		}

	}
	var jindu_b = 0;
	var images_key = [];
	// 发布图文
	function images_data(){
		// console.log(images.length);
		if(images.length){
			_qiniu(images[0], function(ret, err) {
				if (ret.status) {
					if (ret.oper == "complete") {
						var url = ret.info.key;
						// console.log(jindu_b+' ;上传成功：'+url);
						images_key.push(url);
						images.splice(0,1);
						$('#a1').text(parseInt(images_num-images.length)+'/'+images_num+'张');
						jindu_b = (100 / images_num) * (images_num - images.length);
						images_data();
					} else if (ret.oper == "progress") {
						var a = 100 / images_num;
						var a = parseInt(width(ret.percent, a) + jindu_b);
						$('#a2').text(a+'%');
						$('#a3').css('width',a+'%');
					}
				} else {
					_alert('错误_qiniu：' + JSON.stringify(err) + '，请将错误提示截图交给客服处理')
				}
			})
		}else{
			api.pageParam.data = images_key;
			ajax_data();
		}
	}
	// 付费视频观看
	function view(id) {
		if(id){
			// _index_win('article')
			_url({url:'article_view',id:id});
		}
		dialogBox.close({
			dialogName: 'alert'
		});
		api.closeFrame();
	}
	function jindu(){
		var a = 100 / images_num;
		// console.log(a+":"+images_num);
		// return;
		jindu_a = jindu_a + a;
		$('#a1').text(parseInt(images_num-images.length)+'/'+images_num+'张');
		// $('#a2').text(parseInt(jindu_a)+'%');
		// $('#a3').css('width',jindu_a+'%');
	}
	// 进度算法  剩余 总共
	function width(p, t) {
		return  (t/100) * p;
	}
	var percent = 0;
	// 发布视频
	function video_data(){
		$('#a1').text('正在上传');
		// 获取图片缩略图
		var videoScreenshots = api.require('videoScreenshots');
		videoScreenshots.screenshots({
			videoUrl:api.pageParam['data'],
			time:0,
		}, function(ret){
		    // console.log(JSON.stringify(ret));
				if(ret.status && ret.path){
					var img = api.pageParam['img_ios'] ? api.pageParam['img_ios'] : ret.path;
					// 上传图片
					_qiniu(img, function(ret, err) {
						if (ret.status) {
							if (ret.oper == "complete") {
								img = ret.info.key;
								api.pageParam['img'] = img;
								// console.log('上传成功：'+img);
								// 上传视频
								_qiniu(api.pageParam['data'], function(ret, err) {
									if (ret.status) {
										if (ret.oper == "complete") {
											var video = ret.info.key;
											// console.log('上传成功：'+video);
											// 上传视频
											api.pageParam['data'] = video;
											ajax_data();
										} else if (ret.oper == "progress") {
											if(percent >=ret.percent){
												return;
											}
											percent = ret.percent;
											var a = width(ret.percent, 90)+10;
											// console.log(a);
											$('#a2').text(parseInt(a)+'%');
											$('#a3').css('width',a+'%');
										}
									} else {
										_alert('错误_qiniu：' + JSON.stringify(err) + '，请将错误提示截图交给客服处理')
									}
								})
							} else if (ret.oper == "progress") {
								var a = parseInt(width(ret.percent, 10));
								$('#a2').text(a+'%');
								$('#a3').css('width',a+'%');
							}
						} else {
							_alert('错误_qiniu：' + JSON.stringify(err) + '，请将错误提示截图交给客服处理')
						}
					})
				}else{
					_alert('图片获取失败',function(ret,err){
						api.closeFrame();
					});
				}
		});
	}
	function ajax_data(){
		$('#a1').text('上传成功');
		_ajax('member/article_add',function(ret,err){
			$('.h4').text('发布成功');
			$('#a1').text('提交成功');
			$('#a2').text('100%');
			$('#a3').css('width','100%');
			if(ret){
				console.log(JSON.stringify(ret))
				if(ret.ret){
					_suxiangw_msg({
						content: ret.ret,
						rightTitle: '查看内容',
						url: 'view('+ret.id+')',
						left:'view()',
					})
					return;
				}else{
					_suxiangw_msg({
						content: ret.err,
						rightTitle: '知道了',
						url: 'view()',
						left:'view()',
					})
				}
			}else{
				_alert(JSON.stringify(err))
			}
		},api.pageParam)
	}
	// IOS转码视频
	function zhuanma(){
		$('#a1').text('正在转码');
		var videoTool = api.require('videoTool');
		videoTool.compressVideo({
		    directories:api.pageParam['data'],
		    format:'mp4',
		    presetName:1
		},function(ret,err){
				if(ret.state == 0 && ret.compressPath){
					api.pageParam['data'] = ret.compressPath;
					// 读取图片
					var videoTool = api.require('videoTool');
					videoTool.captureScreen({
					    path:ret.compressPath,
					    startTime:0
					},function(ret,err){
							if(ret.imgPath){
								api.pageParam['img_ios'] = ret.imgPath;
							}
							video_data();
					});
				}else{
					_suxiangw_msg({
						content: '视频转码失败或视频格式不支持',
						rightTitle: '重新试试',
						url: 'zhuanma()',
						left:'view()',
					})
				}
		});
	}
</script>

</html>
